<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>用户详情</title>
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.min.css" />
		<link rel="stylesheet" type="text/css" href="../../css/base.css" />
		<link rel="stylesheet" type="text/css" href="../../css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/yonghu/userInfo.css" />
		<script type="text/javascript" src="../../js/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../../js/loadHtml.js"></script>
	</head>
	<body>
		<div class="wrapper clearfix">
			<div class="sideBar"></div>
			<div class="main">
				<div class="mainTop">
					<h1 class="title"><a href="#">用户列表</a> 用户详情</h1>
					<ul class="tabList">
						<li class="tabCurrent" onclick="tab('tab0')" id="nav0">
							用户信息
						</li>
						<li onclick="tab('tab1')" id="nav1">
							挂号记录
						</li>
						<li onclick="tab('tab2')" id="nav2">
							问诊记录
						</li>
						<li onclick="tab('tab3')" id="nav3">
							病历记录
						</li>
					</ul>
				</div>
				<!-- 用户信息 -->
				<div class="mainDetail" id="tab0" style="display:none;">
					<ul class="userList">
						<li>
							<h1>ID</h1>
							<p>
								101
							</p>
						</li>
						<li>
							<h1>头像</h1>
							<img src="../../img/touxiang.png" />
						</li>
						<li>
							<h1>姓名</h1>
							<p>
								李毅
							</p>
						</li>
						<li>
							<h1>账号</h1>
							<p>
								13922388003
							</p>
						</li>
						<li>
							<h1>身份证号</h1>
							<p>
								411392008439908734
							</p>
						</li>
						<li>
							<h1>性别</h1>
							<p>
								女
							</p>
						</li>
						<li>
							<h1>出生日期</h1>
							<p>
								1994.05.05
							</p>
						</li>
						<li>
							<h1>联系地址</h1>
							<p>
								静安公园
							</p>
						</li>
						<li>
							<h1>备注信息</h1>
							<p>
								备注信息
							</p>
						</li>
						<li>
							<h1>问诊记录数</h1>
							<p>
								101
							</p>
						</li>
						<li>
							<h1>病历数</h1>
							<p>
								101
							</p>
						</li>
						<li>
							<h1>挂号记录数</h1>
							<p>
								101
							</p>
						</li>
						<li>
							<h1>最近登录时间</h1>
							<p>
								2016.05.06 12:12:12
							</p>
						</li>
						<li>
							<h1>注册时间</h1>
							<p>
								2016.05.06 12:12:12
							</p>
						</li>
					</ul>
				</div>
				<!-- 挂号记录 -->
				<div class="mainDetail guahao" id="tab1" style="display:none;">
					<h1>挂号订单数量:<span>122</span></h1>
					<div class="tableMain">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>挂号时间</th>
									<th>挂号人姓名</th>
									<th>挂号科室</th>
									<th>挂号医生</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>泌尿科</td>
									<td>曹操</td>
								</tr>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>泌尿科</td>
									<td>曹操</td>
								</tr>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>泌尿科</td>
									<td>曹操</td>
								</tr>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>泌尿科</td>
									<td>曹操</td>
								</tr>
							</tbody>
						</table>
						<ul class="pagination">
							<li>
								<a href="#">&laquo;</a>
							</li>
							<li class="active">
								<a href="#">1</a>
							</li>
							<li class="disabled">
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#">&raquo;</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 问诊记录 -->
				<div class="mainDetail wenzhen" id="tab2" style="display:none;">
					<h1 class="tableTitle">问诊总订单数量:<span>122</span></h1>
					<div class="tableMain">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>生成时间</th>
									<th>就诊人姓名</th>
									<th>接诊医生</th>
									<th>问诊单状态</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>曹操</td>
									<td>已问诊</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									<div>
										<img src="../../img/del.png" />
										<h1>删除</h1>
									</div></td>
								</tr>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>曹操</td>
									<td>已问诊</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									<div>
										<img src="../../img/del.png" />
										<h1>删除</h1>
									</div></td>
								</tr>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>曹操</td>
									<td>已问诊</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									<div>
										<img src="../../img/del.png" />
										<h1>删除</h1>
									</div></td>
								</tr>
								<tr>
									<td>2016-05-06 12:12</td>
									<td>李毅</td>
									<td>曹操</td>
									<td>已问诊</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									<div>
										<img src="../../img/del.png" />
										<h1>删除</h1>
									</div></td>
								</tr>
							</tbody>
						</table>
						<ul class="pagination">
							<li>
								<a href="#">&laquo;</a>
							</li>
							<li class="active">
								<a href="#">1</a>
							</li>
							<li class="disabled">
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#">&raquo;</a>
							</li>
						</ul>
					</div>
				</div>
				<!-- 病历记录 -->
				<div class="mainDetail bingli" id="tab3" style="display:block;">
					<h1 class="tableTitle">病历总数量:<span>122</span></h1>
					<div class="tableMain">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>姓名</th>
									<th>称呼</th>
									<th>性别</th>
									<th>年龄</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>莉莉</td>
									<td>姐姐</td>
									<td>女</td>
									<td>22</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									</td>
								</tr>
								<tr>
									<td>莉莉</td>
									<td>姐姐</td>
									<td>女</td>
									<td>22</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									</td>
								</tr>
								<tr>
									<td>莉莉</td>
									<td>姐姐</td>
									<td>女</td>
									<td>22</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									</td>
								</tr>
								<tr>
									<td>莉莉</td>
									<td>姐姐</td>
									<td>女</td>
									<td>22</td>
									<td class="last">
									<div>
										<img src="../../img/chakan.png"/>
										<h1>查看</h1>
									</div>
									</td>
								</tr>
							</tbody>
						</table>
						<ul class="pagination">
							<li>
								<a href="#">&laquo;</a>
							</li>
							<li class="active">
								<a href="#">1</a>
							</li>
							<li class="disabled">
								<a href="#">2</a>
							</li>
							<li>
								<a href="#">3</a>
							</li>
							<li>
								<a href="#">4</a>
							</li>
							<li>
								<a href="#">5</a>
							</li>
							<li>
								<a href="#">&raquo;</a>
							</li>
						</ul>
					</div>
				</div>
				
				<!-- 弹框内容2 -->
				<div class="alertMain">
					<div class="alertCon">
						<img src="../../img/arrow.png" />
						<h1>删除订单</h1>
						<p>确定删除该订单吗？</p>
						<div>
							<button>保存</button>
							<button>取消</button>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script type="text/javascript">
	function tab(pid) {
		var tabs = ["tab0", "tab1", "tab2", "tab3"];
		for (var i = 0; i < 5; i++) {
			if (tabs[i] == pid) {
				document.getElementById("nav" + i).className = "tabCurrent";
				document.getElementById(tabs[i]).style.display = "block";
			} else {
				document.getElementById("nav" + i).className = "";
				document.getElementById(tabs[i]).style.display = "none";
			}
		}
	}
</script>
<script type="text/javascript">
	$(function(){
		$('.last div').hover(function(){
			$(this).children('h1').show();
		},function(){
			$(this).children('h1').hide();
		});
		
		$('.pagination li').click(function(){
			$(this).addClass('active').siblings('li').removeClass('active');
		});
		
		$('.table tr').find('.last div:eq(1)').click(function(){
			var alertTop=$(this).offset().top+60;
			$('.alertMain').css({'top':alertTop});
			$('.alertMain').show();
		});
		
		$('.alertCon button:eq(0)').click(function(){
			$('.alertMain').hide();
		});
		
	});
	
	
</script>